<template>
  <div class="report-table">
    <vxe-table
      ref="tableDataRef"
      :data="tableData"
      border
      resizable
      show-overflow
      :loading="tableLoading"
      :height="tableHight"
      highlight-hover-row
      :checkbox-config="{ highlight: true}"
      :cell-style="cellStyle"
      :tree-config="{children: 'children', iconOpen: 'iconfont icon-xiajiantou', iconClose: 'iconfont icon-youjiantou'}"
      :footer-method="footerMethod"
      :header-cell-style="headerCellStyle"
      :footer-cell-class-name="footerCellClassName"
      show-footer
    >
      <vxe-table-column v-for="(item, index) in headerList" :key="item.id" :title="item.label" :field="item.value" :tree-node="index? false: true" min-width="180" :fixed="getFixedLeft(index)" type="html" />
      <template #empty>
        <span style="color: red;">
          <img style="height:150px" src="../../../assets/images/monthReport/noReport.png">
          <div>暂无报表数据</div>
        </span>
      </template>
    </vxe-table>
  </div>
</template>

<script>
// import {
//   data,
//   header,
//   headList,
//   fixedLeft
// } from '../data';
import {
  getHeader,
  getData,
  exportExcel
} from '@/api/monthSummaryReport';
import { downloadFile } from '@/utils/commonMethods.js';
import XEUtils from 'xe-utils';
import _ from 'lodash';
// import { locales } from 'moment';
export default {
  name: 'ReportTable',
  props: {
    reportTime: {
      type: String,
      default: ''
    },
    tableHight: {
      type: String,
      default: '600'
    },
    inputSearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      header: [],
      tableLoading: false,
      // filterInput: true,
      tableDataAll: [],
      iVouchId: '',
      columnList: [],
      headerList: [],
      time: ''
    };
  },
  watch: {
    // tableHight(height) {
    //   console.log(height,'height')
    // }
    reportTime(time) {
      this.time = time;
      time ? this.getTableHead() : (this.tableData = [], this.tableDataAll = []);
      // time ? this.tableData = data.dataList : (this.tableData = [], this.filterInput = true);
    },
    inputSearch(value) {
      this.handleSearch(value);
    }
  },
  created() {
    if (localStorage.getItem('siderName') === '一般公共预算支出表') {
      // this.reportType = '2';
      this.iVouchId = '8262';
      // this.functionName = 'CNAME';
      // this.money1 = 'IMONEY';
      // this.money2 = 'ITMONEY2';
    } else {
      this.iVouchId = '8282';
    }
    // this.header = header;
    // this.tableLoading = false;
  },
  methods: {
    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计';
          } else {
            if (columnIndex === 1) {
              return '--';
            } else {
              return XEUtils.sum(data, column.property);
            }
          }
        })
      ];
      return footerData;
    },
    // 表单搜索
    async handleSearch(key) {
      const value = (key + '').trim().toLowerCase();
      // this.filterInput ? (this.tableDataAll = _.cloneDeep(this.tableData), this.filterInput = false) : null;
      if (value && this.tableDataAll.length) {
        this.tableLoading = true;
        const filterRE = new RegExp(value, 'gi');
        const options = { children: 'children' };
        const searchProps = [];
        this.headerList.forEach(item => {
          searchProps.push(item.value);
        });
        this.tableData = XEUtils.searchTree(this.tableDataAll, item => searchProps.some(key => (item[key] + '').toLowerCase().indexOf(value) > -1), options);
        XEUtils.eachTree(this.tableData, item => {
          searchProps.forEach(key => {
            item[key] = (item[key] + '').replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`);
          });
        }, options);
        // this.$nextTick(async () => {
        //   await this.$refs.tableDataRef.setAllTreeExpand(true);
        //   this.tableLoading = false;
        // });
        setTimeout(() => {
          this.$refs.tableDataRef.setAllTreeExpand(true);
          this.tableLoading = false;
        }, 0);
      } else {
        this.tableData = this.tableDataAll;
      }
    },
    // 表格内容左侧固定
    getFixedLeft(index) {
      if (index <= 3) {
        return 'left';
      } else {
        return '';
      }
    },
    async getTableHead() {
      this.tableLoading = true;
      const { success, data } = await getHeader({ iVouchId: this.iVouchId });
      if (success) {
        this.columnList = data.columnList;
        this.headerList = data.headerList;
        const res = await getData({
          columnList: data.columnList,
          headerList: data.headerList,
          moneyType: '1',
          month: this.time.split('-')[1],
          orderBy: '',
          year: this.time.split('-')[0]
        });
        if (res.success && res.data) {
          this.tableData = res.data;
          this.tableDataAll = _.cloneDeep(this.tableData);
        } else {
          this.tableData = [];
          this.tableDataAll = [];
        }
      } else {
        this.tableData = [];
        this.tableDataAll = [];
      }
      this.tableLoading = false;
    },
    reportDown() {
      if (this.tableData.length) {
        exportExcel({
          columnList: this.columnList,
          headerList: this.headerList,
          moneyType: '1',
          year: this.time.split('-')[0],
          month: this.time.split('-')[1]
        }).then(res => {
          downloadFile(res, `${localStorage.getItem('siderName')}.xls`, '.doc');
        });
      } else {
        this.$message.error('该月份无报表数据,无法下载');
      }
    },
    headerCellStyle({ column, columnIndex }) {
      // 'background-color': 'rgb(64, 158, 255)',
      // 'color':'#fff',
      // 'border-bottom': '1px solid #fff',
      // 'text-align': 'center',
      // 'border-right': '1px solid #fff',
      // 'height': '54px'
      if (columnIndex <= 1) {
        return {
          textAlign: 'left',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      } else {
        return {
          textAlign: 'right',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      }
    },
    cellStyle({ colum, columnIndex }) {
      if (columnIndex <= 1) {
        return {
          textAlign: 'left'
        };
      } else {
        return {
          textAlign: 'right'
        };
      }
    },
    footerCellClassName({ _, columnIndex }) {
      if (columnIndex >= 2) {
        return 'footer-col-right';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.report-table{

  ::v-deep .report-table-footer-cell{
    font-size: 18px;
    color: #000;
    background: #e6f7ff;
  }
  ::v-deep .keyword-lighten {
    color: #000;
    background-color: #FFFF00;
  }
}
.report-table /deep/ .vxe-table .vxe-body--column.col--ellipsis, .vxe-table.vxe-editable .vxe-body--column, .vxe-table .vxe-footer--column.col--ellipsis, .vxe-table .vxe-header--column.col--ellipsis {
    height: 30px !important;
}
</style>
